<template>
  <Category :scene="scene"></Category>
  <el-card style="margin: 10px 0px">
    <div v-show="scene == 0">
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        @click="addSpu"
        v-has="`btn.Spu.add`"
        >添加SPU</el-button
      >
      <el-table border style="margin: 10px 0px" :data="records">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="SPU名称" width="150" align="center" prop="spuName">
        </el-table-column>
        <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
              @click="addSku(row)"
              v-has="`btn.Spu.addsku`"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              icon="Edit"
              title="修改SPU"
              @click="updateSpu(row)"
              v-has="`btn.Spu.update`"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="View"
              title="查看SKU列表"
              v-has="`btn.Spu.skus`"
              @click="findSku(row)"
            ></el-button>

            <el-popconfirm
              :title="`确定要删除${row.spuName}吗?`"
              @confirm="deleteSpu(row)"
              width="200px"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  title="删除SPU"
                  v-has="`btn.Spu.delete`"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getHasSpu"
        @size-change="sizeChange"
      />
    </div>

    <!-- 添加或修改spu的结构 -->
    <SpuForm v-show="scene == 1" @changeScene="hiddenSpuForm" ref="SpuFormRef"></SpuForm>
    <!-- 添加sku的结构 -->
    <SkuForm v-show="scene == 2" @changeScene="hiddenSpuForm" ref="SkuFormRef"></SkuForm>
    <!-- 展示已有的SKU列表 -->
    <el-dialog v-model="dialogTableVisible" title="SKU列表" width="600">
      <el-table border :data="skuArr">
        <el-table-column prop="skuName" label="SKU名字" width="150" />
        <el-table-column prop="price" label="SKU价格" width="120" />
        <el-table-column prop="weight" label="SKU重量" width="120" />
        <el-table-column label="SKU图片">
          <template #="{ row, $index }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import useCategoryStore from '@/store/modules/category'
import { reqHasSpu, reqSkuList, reqRemoveSpu } from '@/api/product/spu'
import type {
  HasSpuResponseData,
  Records,
  SpuData,
  SkuInfoData,
  SkuData
} from '@/api/product/spu/type'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import { ElMessage } from 'element-plus'

let scene = ref<number>(0) //0:显示已有spu； 1:添加或修改spu的结构； 2:添加sku的结构
let pageNo = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)

//获取子组件实例
let SpuFormRef = ref<any>()
let SkuFormRef = ref<any>()

let categoryStore = useCategoryStore()

//存储已有的spu
let records = ref<Records>([])

//存储全部的SKU的数据
let skuArr = ref<SkuData[]>([])

let dialogTableVisible = ref<boolean>(false)

//监听仓库三级分类id的变化
watch(
  () => categoryStore.c3Id,
  () => {
    //清空上一次查询的属性和属性值
    records.value = []
    //确保三级分类ID有了之后再发请求
    if (!categoryStore.c3Id) return
    //获取分类ID
    getHasSpu()
  }
)

//此方法执行可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async (pager = 1) => {
  pageNo.value = pager
  let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
  if (result.code == 200) {
    records.value = result.data.records
    total.value = result.data.total
  }
}

const sizeChange = () => {
  getHasSpu()
}

//点击添加Spu
const addSpu = () => {
  scene.value = 1
  SpuFormRef.value.initAddSpu(categoryStore.c3Id)
}

//让子组件SpuForm绑定自定义事件：目的是让子组件通知父组件切换场景为0
//子组件SpuForm点击取消变为场景0，展示已有的spu
const hiddenSpuForm = (obj: any) => {
  scene.value = obj.flag
  //再次获取全部的已有的spu
  if (obj.params == 'update') {
    getHasSpu(pageNo.value)
  } else if (obj.params == 'add') {
    getHasSpu()
  }
}

//点击修改spu
const updateSpu = (row: SpuData) => {
  scene.value = 1
  //拿到子组件实例，然后调用子组件实例的方法获取完整的已有SPU的数据
  SpuFormRef.value.initHasSpuData(row)
}

//添加Sku按钮的回调
const addSku = (row: SpuData) => {
  scene.value = 2
  SkuFormRef.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}

//查看sku列表的回调
const findSku = async (row: SpuData) => {
  let result: SkuInfoData = await reqSkuList(row.id as number)
  if (result.code == 200) {
    skuArr.value = result.data
    dialogTableVisible.value = true
  }
}

//删除SPU的回调
const deleteSpu = async (row: SpuData) => {
  let result: any = await reqRemoveSpu(row.id as number)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功！'
    })
    getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败！'
    })
  }
}
</script>

<style lang="scss" scoped></style>
